<template>
	<view>
		<view :class="'coupon-box-'+set.type">
			<view class="coupon-list" v-for="list in couponList" @click="click(list)" v-if="list.is_core==1">
				<view class="coupon-top" :style="'background: linear-gradient(to right,'+list.color+','+color_t(list.color)+');'">
					<view class="coupon-dian" >
						<view class="dian" v-for="l in dian"></view>
					</view>
					<view class="top-content">
						<view v-if="list.type==1">
							<text style="color: #fff;font-size: 32px">{{list.money}}</text> 
							<text style="font-size: 14px;color: #fff;margin-left: 5px;">元</text>
						</view>
						<view v-else>
							<text style="color: #fff;font-size: 32px">{{list.discount/10}}</text> 
							<text style="font-size: 14px;color: #fff;margin-left: 5px;">折</text>
						</view>
						<view class="coupon-title">
							<view style="font-size: 15px;color: #fff;text-shadow: 0 0 4px #999;">{{list.name}}</view>
							<view style="font-size: 12px;color: #fff">
								<text v-if="list.use_money>0">满{{list.use_money}}元可用</text>
								<text v-else>无门槛使用</text>
							</view>
						</view>
					</view>
					<view >
						<text class="lingqu" v-if="list.lingqu==0" :style="'color: '+list.color" >立即领取</text>
						<text class="lingqu" v-else :style="'color: '+list.color" @click.stop="lingqu()">已领取</text>
					</view>
				</view>
				<view class="coupon-bottom">
					<view style="padding: 10px;">
						<view class="coupon_desc" v-if="set.type==1">有效时间：
							<text v-if="list.effective_time==1">{{list.use_day}}天</text>
							<text v-else>{{list.use_time}}</text>
						</view>
						<view class="coupon_desc">适用范围：
						
						<text v-if="list.use_type==0">全场通用</text>
						<text v-else-if="list.use_type==1">指定分类</text>
						<text v-if="list.use_type==2">指定商品</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view >
			<u-popup :show="show" @close="close"  :round="10" >
			        <view class="popup-box" :style="'background: linear-gradient(to right,'+curInfo.color+','+color_t(curInfo.color)+');'"> 
			           <view style="margin-top: 15px;display: flex;flex-direction: column;align-items: center;padding: 10px;
					   background-color: #fff;border-radius: 10px;">
						   <view style="font-size: 15px;color: #333;margin-bottom: 10px;;">{{curInfo.name}}</view>
						   <view>
							   <text v-if="curInfo.type==1" style="font-size: 31px;color: #333;">{{curInfo.money}}元</text>
							    <text v-else style="font-size: 31px;color: #333;">{{curInfo.discount/10}}折</text>
						   </view>
						   <view  style="margin: 10px 0;color: #666;font-size: 13px;">
							   满{{curInfo.use_money}}元可用
						   </view>
						   <view class="info_lingqu" :style="'background: '+set.app_color" @click="lingqu()">
							   立即领取
						   </view>
						   <view style="width: 100%;margin: 10px 0;">
							   <u-divider text="详细介绍" :dashed="true"></u-divider>
						   </view>
						   <view style="display: flex;flex-direction: column;align-items: flex-start;width: 100%;;">
							   <text class="info_title">使用时间</text>
							   <view class="info-content">
								   <text v-if="curInfo.effective_time==1">领取后{{curInfo.use_day}}天内有效</text>
								   <text v-else>{{curInfo.use_time}}</text>
							   </view>
							   <text class="info_title">使用规则</text>
							   <view class="info-content">
										   <text v-if="curInfo.use_type==0">全场通用</text>
										 
										 
										   <template v-else-if="curInfo.use_type==1">
											   <view style="display: flex;flex-direction: row;">
												    <text style="width: 130px;;">指定分类：</text>
												    <view style="display: flex;flex-direction: column;color: #999;width: 90%;">
														<view  v-for="(cl,ck) in curInfo.use_column_list">{{ck}}</view>
													</view>
											   </view>
							
										   </template>
										   <template v-else-if="curInfo.use_type==2">
											   <view style="display: flex;flex-direction: row;">
											   <text style="width: 130px;;">指定商品：</text>
													<view style="display: flex;flex-direction: column;color: #999;flex-wrap: wrap;">
														 <view style="margin-bottom: 5px;;" v-for="(cl,ck) in curInfo.goods_id" class="u-line-1">{{cl.title}}</view>
													</view>
											   </view>
										   </template>
							   </view>
							    <text class="info_title">其他说明</text>
								<view class="info-content">{{curInfo.desc}}</view>
						   </view>
					   </view>
			        </view>
				</u-popup>
				<u-modal :show="lq"
				@cancel="lq = false"
				@confirm="lingqu()"
				 content="确定要领取该券吗"
				:confirmColor="set.app_color"
				 :showCancelButton="true"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
			name:"coupon_index",
			data() {
				return {
					lq:false,
					show:false,
					dian:[],
					couponList:[],
					curInfo:{}
				};
			},props:{
				 set:{
					type:Object,
				 	default(){
						return {
							type:1,
							app_color:"red"
						}
					}
				 }
			},created() {
				for(let k=0;k<20;k++){
					this.dian.push(k);
				}
				this.getInfo()
			},methods:{
	
				lingqu(){
					if(this.lq){
						this.lq = false;
						let self = this;
						this.moxiPost("/plugin/coupon/user/coupon/receive",{id:this.curInfo.id},function(data){
							self.msg(data.hint);
							self.getInfo()
						})
					}else{
						this.show = false;
						this.lq = true;
					}
				},
				close(){
					this.show = false;
				},
				color_t(color){
					return uni.$u.colorToRgba(color, 0.5);
				},
				getInfo(){
					let self = this;
					this.moxiPost('/plugin/coupon/index/coupon/coupon_info',{},function(data){
						self.couponList = data.data;
						console.log(data.data);
					})
				},
				click(e){
					this.curInfo = e;
					this.show = true;
					console.log(e);
				}
			}
			
	}
</script>

<style lang="scss">
	.coupon-dian{position: absolute;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-around;
		bottom:-5px;
		left: 0;
		width: 100%;
		.dian{width: 10px;height: 10px;background-color: #fff;border-radius: 100%;}
	}
	.coupon-box-1{
		height: 100%;overflow: auto;display: flex;flex-direction: column;padding: 10px;
		.coupon-list{width: 100%;min-height: 80px;margin-bottom: 12px;;
				border-radius: 5px;display: flex;flex-direction: column;
				box-shadow:  0 0 5px #ccc;
			}
			.top-content{padding: 10px;display: flex;flex-direction: row;}
			.coupon-top{width: 100%;height: 80px;position: relative;
			align-items: center;display: flex;flex-direction: row;justify-content: space-between;
			border-top-left-radius: 5px;border-top-right-radius: 5px;}
			.coupon-bottom{width: 100%;min-height: 50px;
			
			border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;
			}
		.lingqu{padding: 5px 15px;border-radius: 15px;background-color: #fff;font-size: 12px;margin-right: 10px;box-shadow: 0 0 5px #ccc}
		.coupon_desc{font-size: 13px;color: #666}
		.coupon-title{margin-left: 10px;margin-top:5px}
	}
	.coupon-box-2{
		overflow: auto;display: flex;flex-direction: row;padding: 10px;
		justify-content: space-between;
		.coupon-list{width: 48%;min-height: 80px;margin-bottom: 12px;
				border-radius: 5px;display: flex;flex-direction: column;
				box-shadow:  0 0 5px #ccc;
			}
			.top-content{display: flex;flex-direction: column;padding: 5px;}
			.coupon-top{width: 100%;height: 130px;position: relative;
			align-items: center;display: flex;flex-direction: column;text-align: center;
			border-top-left-radius: 5px;border-top-right-radius: 5px;}
			.coupon-bottom{width: 100%;height: 35px;overflow: hidden;
			border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;
			}
		.lingqu{padding: 5px 15px;border-radius: 15px;background-color: #fff;margin-top: 15px;
		font-size: 12px;box-shadow: 0 0 5px #ccc}
		.coupon-title{margin-top:5px}
		.coupon_desc{font-size: 13px;color: #666}
	}
	.info_lingqu{padding: 5px 21px;background-color: red;border-radius: 15px;font-size: 14px;color: #fff;}
	.info_title{font-size: 13px;color:#b5b5b5;margin: 10px 0;}
	.info-content{font-size: 14px;color: #333;margin-bottom: 5px;}
	.popup-box{height: 750rpx;overflow: auto;padding: 18px;border-top-left-radius: 10px;border-top-right-radius: 10px}
</style>